<template>
  <div class="coupon">
    <el-card>
      <avue-crud
        ref="crud"
        style="width:100%"
        :data="loadData"
        :option="tableOption"
        :table-loading="loading"
      >
        <template slot="couponContent" slot-scope="scope">
          <span>{{scope.row.discount?'折扣'+'/'+ scope.row.discount + '折':''}}</span>
          <br v-if="scope.row.discount" />
          <span>{{scope.row.discountAmount?'满减金额'+'/'+ scope.row.discountAmount+'元':''}}</span>
          <br scope.row.discountAmount />
          <span>{{scope.row.fullAmount?'满足金额'+'/'+ scope.row.fullAmount+'元':''}}</span>
        </template>
        <template slot="couponGoodsId" slot-scope="scope">
          <span>{{scope.row.couponGoodsId?'门店':'商品'}}</span>
        </template>
      </avue-crud>
      <template>
        <div style="width:100%;position:relative;height:100px">
          <el-pagination
            :page-sizes="[10, 20,30,40, 50, 100]"
            :pager-count="7"
            :current-page="page.current"
            :page-size="page.size"
            :total="page.total"
            layout="total, sizes, prev, pager, next, jumper"
            style="margin:2% 0;position:absolute;right:1%"
            background
            @size-change="sizeChange"
            @current-change="currentChange"
          ></el-pagination>
        </div>
      </template>
    </el-card>
  </div>
</template>

<script>
import { couponRecList } from "@/api/shop/member/list.js";
export default {
  data() {
    return {
      loading: false,
      page: {
        total: 0,
        size: 10,
        current: 1,
      },
      loadData: [{ ddbh: "1212" }],
      xsleList: [
        // {
        //   label: "全部业务",
        //   value: "01",
        // },
        {
          label: "商超",
          value: "02",
        },
        {
          label: "洗衣",
          value: "03",
        },
        {
          label: "家政",
          value: "04",
        },
        {
          label: "咖吧",
          value: "05",
        },
      ],
      tableOption: {
        header: false,
        align: "center",
        editBtn: false,
        delBtn: false,
        menu: false,
        column: [
          {
            label: "券活动ID",
            prop: "activityId",
            minWidth: 150,
            overHidden: true,
          },
          {
            label: "优惠券名称",
            prop: "couponName",
            minWidth: 120,
            overHidden: true,
          },
          {
            label: "券内容",
            prop: "couponContent",
            slot: true,
            minWidth: 120,
            overHidden: true,
          },
          {
            label: "所属业务",
            prop: "businessType1",
            minWidth: 120,
            overHidden: true,
          },
          {
            label: "作用范围",
            prop: "couponGoodsId",
            slot: true,
            minWidth: 120,
            overHidden: true,
          },
          {
            label: "有效期",
            prop: "couponEndtime",
            overHidden: true,
          },
          {
            label: "描述",
            prop: "couponDec",
            minWidth: 120,
            overHidden: true,
          },
          {
            label: "发放时间",
            prop: "receiveTime",
            overHidden: true,
          },
          {
            label: "状态",
            prop: "couponStatus",
            minWidth: 120,
            overHidden: true,
            dicData: [
              {
                label: "正常",
                value: "00",
              },
              {
                label: "已使用",
                value: "01",
              },
              {
                label: "已过期",
                value: "02",
              },
            ],
          },
        ],
      },
    };
  },
  methods: {
    getList() {
      couponRecList(
        Object.assign({ personId: this.$route.query.personId }, this.page)
      ).then((val) => {
        console.log(val);
        let data = val.data.data;
        this.page = {
          total: data.total,
          size: data.size,
          current: data.current,
        };
        this.loadData = data.records;
        this.loadData.forEach((item) => {
          item.businessType3 = [];
          item.businessType2 = item.businessType.split(",");
          item.businessType2.forEach((i) => {
            this.xsleList.forEach((m) => {
              if (i == m.value) {
                item.businessType3.push(m.label);
              }
            });
          });
          item.businessType1 = item.businessType3.join(",");
          item.activityTime =
            item.activityBegintime + " - " + item.activityEndtime;

          item.couponEndtime =
            item.couponBegintime + " - " + item.couponEndtime;
        });
        console.log(this.loadData);
      });
    },
    sizeChange(size) {
      this.page.size = size;
      this.getList();
    },
    currentChange(current) {
      this.page.current = current;
      this.getList();
    },
  },
};
</script>

<style lang="scss" scoped>
.coupon {
  .row {
    margin: 30px 0px;
  }
  .bg {
    width: 202px;
    height: 33px;
    text-align: center;
    line-height: 33px;
    background-color: rgba(242, 242, 242, 1);
    font-weight: 400;
    font-style: normal;
    font-size: 16px;
    color: rgba(0, 0, 0, 0.647058823529412);
  }
}
</style>